<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<!-- 0. 引入路由组件 -->
		<script src="https://unpkg.com/vue-router@4"></script>
	</head>
	<body>
		<div id="app">
			<p>Vue是单页应用</p>
			
			<h2>切换路由方式1 a标签</h2>
			<a href="#/">首页</a>
			<a href="#/about">关于</a>
			<a href="#/login">登陆</a>
			<a href="#/list">商品列表</a>
			<br />
			<h2>切换路由方式2 router-link标签</h2>
			推荐使用:router-link
			<router-link to="/" tag="span">首页</router-link>
			<router-link to="/about">关于</router-link>
			<router-link to="/login">登录</router-link>
			<br />
			<button @click="foo">测试</button>
			
			<h1>下面是路由视图</h1>
			<!-- 路由匹配到的组件将渲染在这个里面 router-view标签 -->
			<router-view></router-view>
		</div>

		<template id="home">
			<div>{{msg}}</div>
		</template>
		
		<template id="login">
			用户名:<input type="text" />
			密码:<input type="password" />
			<input type="button" value="登录" />
		</template>
		
		<template id="productlist">
			<div>商品列表页</div>
			<table>
				<tr v-for="(item,i) in products" :key="item.id">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.price}}</td>
					<td><a :href="'#/detail?id='+item.id">查看详情</a></td>
				</tr>
			</table>
			<a href="#/detail?id=10">查看详情</a>
		</template>
		
		<template id="productdetail">
			<div>商品{{id}}详情页</div>
		</template>
		
		<script>
			
			// 1. 定义组件 （每个页面作为一个组件)
			const Home = {
				data(){
					return {
						msg:"首页"
					}
				},
				template:"#home"
			}
			const About = {
				template:"<div>About</div>"
			}
			const Login = {
				template:"#login"
			}
			const ProductList = {
				data(){
					return {
						products:[
							{
								id:1,
								name:"西瓜",
								price:10
							},
							{
								id:2,
								name:"香蕉",
								price:20
							}
						]
					}
				},
				template:"#productlist"
			}
			const ProductDetail = {
				data(){
					return {
						id: null,
					}
				},
				created(){
					// 路由参数是在 this.$route 中
					console.log(this.$route.query.id);
					this.id = this.$route.query.id;
				}
				,
				template:"#productdetail"
			}
			
			// 2. 定义路由信息
			// path 访问的路径
			// component 映射的组件
			// 路由重定向 redirect:  要跳转的路径
			const routes = [
				{ path:"/", component: Home,
					// redirect: '/login', 
					},
				{ path:"/about", component: About},
				{ path:"/login", component: Login},
				{ path:"/list", component: ProductList},
				{ path:"/detail", component: ProductDetail},
			]
			
			// 3. 创建路由对象
			const router = VueRouter.createRouter({
				history:VueRouter.createWebHashHistory(),
				routes:routes, // routes:routes 的简写
			})
			
			const vm = Vue.createApp({
				data() {
					return {
						msg: "Hello Vue!",
						name: "张三"
					}
				},
				methods: {
					foo() 
					{
						this.$router.push("/login"); // 保存路径地址，历史标签中可以访问
						// this.$router.replace("/login");// 不保存路径地址，历史标签中可以不可以访问
					}
				},
			})
			
			// 4. 使用路由
			vm.use(router);
			
			vm.mount("#app");
		</script>
	</body>
</html>
